<template>
  <div class="running">
    <div class="top">
      <div class="running-list">
        <running-item v-for="item in topCol" :key="item.titleKey" :item="item" :list-data="listData"
                      :top-data="topData"
        ></running-item>
      </div>
      <div class="running-list">
        <running-item v-for="item in rightCol" :key="item.titleKey" :item="item" :list-data="listData"
                      :top-data="topData"
        ></running-item>
      </div>
      <div class="bottom">
        <div class="title">
          <category-title title="拓扑图" title-sub="Topology Map"/>
        </div>
        <div class="tbt">
<!--          <img src="@/assets/tbt.png" alt="拓补图" class="tbtimg">-->
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import CategoryTitle from "@/components/customs/category-title/index.vue";
import {rightCol, topCol} from "@/pages/running-state/data";
import {ref} from "@vue/reactivity";
import {CpGetApi, CpkjGetApi, CpuGetApi, JkzbApi, NcGetApi} from "@/common/customs/overview";
import {onMounted} from "@vue/runtime-core";
import {reactive} from "vue";
import RunningItem from "./component/runningItem/index.vue";

const topData = ref({});
const listData = reactive({
  cpu: [],
  nc: [],
  cp: [],
  cpkj: []
});
const getName = async () => {
  const api = new JkzbApi();
  await api.send();
  const {data} = await api.getDatas();
  topData.value = data;
};
const getCpu = async () => {
  const api = new CpuGetApi();
  api.params({
    page: 1,
    page_size: 100,
  });
  await api.send();
  const {data} = await api.getDatas();
  listData.cpu = data.data;
};
const getNc = async () => {
  const api = new NcGetApi();
  api.params({
    page: 1,
    page_size: 100,
  });
  await api.send();
  const {data} = await api.getDatas();
  listData.nc = data.data;
};
const getCp = async () => {
  const api = new CpGetApi();
  api.params({
    page: 1,
    page_size: 100,
  });
  await api.send();
  const {data} = await api.getDatas();
  listData.cp = data.data;
};
const getCpkj = async () => {
  const api = new CpkjGetApi();
  api.params({
    page: 1,
    page_size: 100,
  });
  await api.send();
  const {data} = await api.getDatas();
  listData.cpkj = data.data;
};

const getAll = () => {
  getCpu();
  getNc();
  getCp();
  getCpkj();
};
onMounted(() => {
  getName();
  getAll();
});
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
